<template>
  <div class="box">
    <div class="header">
 <van-nav-bar title="购物车" left-arrow @click-left="$router.back()">
  <template #right>
  <p>编辑</p>
  </template>
 </van-nav-bar>
    </div>
    <div class="content">
      <!--空状态占位图-->
      <van-empty
        image="search"
        description="没有商品了~"
        v-if="store.cartList.length == 0"
      />

      <van-swipe-cell v-for="item in store.cartList" :key="item.id" v-else>
        <van-card :num="item.count" :price="item.price" :title="item.title">
          <template #thumb>
            <!--图片懒加载-->
            <van-image lazy-load :src="item.image" />
          </template>

          <template #tag>
            <!--复选框-->
            <van-checkbox v-model="item.checked"></van-checkbox>
          </template>

          <template #footer>
            <!--数量加减-->
            <button
              @click="subCartCount(item.id, item.count)"
              :disabled="item.count == 1"
            >
              -
            </button>
            {{ item.count }}
            <button @click="addCartCount(item.id, item.count)">+</button>
          </template>
        </van-card>
        <template #right>
          <!--删除-->
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            style="height: 100%"
            @click="delItem(item.id)"
          />
        </template>
      </van-swipe-cell>

    <!--10秒秒杀倒计时-->
         <div class="time">
       <van-button type="primary" @click="btn"   >{{msg}}</van-button>
        </div>
        <div v-show="isShow">
             <img src="http://dummyimage.com/200X200/8cf279" alt="">
             <p>打白派他生平圆式图电改期矿界因样市史主备具思日调王去张片转最派结眼四又准我基可各</p>
             <p>￥77.7</p>
        </div>

  <!-- 骨架屏 -->
         <van-skeleton>
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>



      <!--结算栏-->
      <van-submit-bar
        :price="store.totalPrice * 100"
        button-text="去结算"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allChecked">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import shake from "@/utils/shake";
import { ref, computed } from "vue";
import {useRouter} from 'vue-router'
const router = useRouter()
const store = useCounterStore();
const msg =ref('点我开启10秒倒计时')
const count = ref(10)
const isShow=ref(true)
const timer = ref(null)
const btn = ()=>{
     msg.value = count.value +'秒后关闭商品'
     timer.value = setInterval(()=>{
        count.value--
         if(count.value==0)
         {
             msg.value='商品已经关闭'
             count.value =10
             isShow.value=false
         }else
         {
             msg.value = count.value +'秒后关闭商品'
            
         }
     },1000)
}
 
//删除
const delItem = (id) => {
  store.cartDelItem(id);
};

//数量加 有防抖效果
const addCartCount = shake((id, count) => {
  store.addCount(id, count);
}, 1000);

//数量减 有防抖效果
const subCartCount = shake((id, count) => {
  store.subCount(id, count);
}, 1000);

//全选
const allChecked = computed({
  get() {
    if (store.cartList.length == 0) {
      return false;
    } else {
      return store.cartList.every((item) => item.checked == true);
    }
  },
  set(value) {
    store.cartList.forEach((item) => (item.checked = value));
  },
});
//跳转到订单页面 有防抖效果
const onSubmit=shake(()=>{
  router.push('/order')
},1000)
</script>

<style lang="scss" scoped>
.time {
  display: flex;
  justify-content: center;
}
</style>